<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>position-fixed</title>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<script>

</script>
<style>
  .div1{
    background-color: red;
    width: 10000px;
    height: 10000px;
  }
  /*fixed总是以body为定位时的对象，总是根据浏览器的窗口来进行元素的定位，通过"left"、 "top"、 "right"、 "bottom" 属性进行定位。 */
  /*给div2的position加上fixed属性后，不论我们如何拉动浏览器的滚动条，层2在浏览器中的位置都是不会变化的，是不是感觉有跃跃欲试的感觉呢，那么就赶紧动手实验一下吧。  */
  .div2{
    background-color: green;
    width: 100px;
    height: 100px;
    position: fixed;
    left: 50px;
    top: 50px;
  }
</style>
</body>
</html>
